<template>
  <div id="list">
    <a-card class="sel">
      <a-row :gutter="16">
        <a-col> 人员搜索: </a-col>
        <a-col :span="5">
          <a-input placeholder="请输入" v-model:value="selname"></a-input
        ></a-col>
        <a-col> 角色: </a-col>
        <a-col :span="5">
          <a-select
            ref="select"
            style="width: 240px"
            placeholder="请选择"
            v-model:value="selrole"
          >
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="true">运营员</a-select-option>
            <a-select-option :value="false">维修员</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-button type="primary" @click="getData">
            <template #icon> <SearchOutlined /> </template>查询
          </a-button>
        </a-col>
      </a-row>
    </a-card>
    <!-- 表格区域 -->
    <a-card class="table" :style="{ margin: '10px 0' }">
      <a-table :columns="columns" :data-source="tableData">
        <template #role="{ record }">
          {{ record.role ? "运营员" : "维修员" }}
        </template>
        <template #action="{ record }">
          <a
            @click="
              () => {
                visible = true;
                modelInfo = record;
              }
            "
            >查看详情</a
          >
        </template>
      </a-table>
    </a-card>
    <!-- 弹出框 -->
    <a-modal
      v-model:visible="visible"
      title="人员详细"
      width="630px"
      footer=""
      :afterClose="() => {}"
    >
      <div class="modelTop" :style="{ marginBottom: '20px' }">
        <a-descriptions size="small">
          <a-descriptions-item label="人员名称">{{
            modelInfo.name
          }}</a-descriptions-item>
          <a-descriptions-item label="角色">{{
            modelInfo.role ? "运营员" : "维修员"
          }}</a-descriptions-item>
          <a-descriptions-item label="联系电话">{{
            modelInfo.phone
          }}</a-descriptions-item>
          <a-descriptions-item label="负责区域">{{
            modelInfo.region
          }}</a-descriptions-item>
        </a-descriptions>
        <el-row :style="{ marginTop: '15px' }">
          <el-col :span="24"> </el-col>
        </el-row>
      </div>
      <a-table
        :columns="modelColumns"
        :dataSource="modelData"
        size="middle"
        align="center"
        :pagination="{ hideOnSinglePage: true }"
        bordered
      >
      </a-table>
    </a-modal>
  </div>
</template>
<script>
// 导入表单组件
import addList from "./addList.vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import { onMounted, reactive, ref, toRefs } from "vue";
import { getWorkload } from "@/api/personnel";
export default {
  components: { addList, SearchOutlined },
  setup() {
    let content = reactive({
      columns: [
        {
          title: "序号",
          key: "index",
          customRender: (text, record, index) => {
            return text.index + 1;
          },
        },
        {
          title: "人员姓名",
          key: "name",
          dataIndex: "name",
        },
        {
          title: "角色",
          key: "role",
          slots: {
            customRender: "role",
          },
        },
        {
          title: "联系电话",
          key: "phone",
          dataIndex: "phone",
        },
        {
          title: "完成工单(本月)",
          key: "end",
          dataIndex: "end",
        },
        {
          title: "进行中工单(本月)",
          key: "ing",
          dataIndex: "ing",
        },
        {
          title: "拒绝工单(本月)",
          key: "refuse",
          dataIndex: "refuse",
        },
        {
          key: "action",
          title: "操作",
          slots: {
            customRender: "action",
          },
        },
      ],
      tableData: [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 1 Lake Park",
          tags: ["loser"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
      ],
      modelColumns: [
        {
          title: "",
          key: "index",
          dataIndex: "index",
          align: "center",
        },
        {
          title: "总工单数",
          key: "all",
          dataIndex: "all",
          align: "center",
        },
        {
          title: "拒绝工单",
          key: "refuse",
          dataIndex: "refuse",
          align: "center",
        },
        {
          title: "完成工单",
          key: "end",
          dataIndex: "end",
          align: "center",
        },
        {
          title: "进行中工单",
          key: "ing",
          dataIndex: "ing",
          align: "center",
        },
      ],
      modelData: [
        {
          index: "本周",
          all: 0,
          end: 0,
          ing: 0,
          refuse: 0,
        },
        {
          index: "本月",
          all: 0,
          end: 0,
          ing: 0,
          refuse: 0,
        },
        {
          index: "本年",
          all: 0,
          end: 0,
          ing: 0,
          refuse: 0,
        },
      ],
      modelInfo: {},
    });
    let selname = ref("");
    let selrole = ref("");
    let visible = ref(false);
    let getData = async () => {
      console.log(123123123);
      let {
        data: { data },
      } = await getWorkload({ name: selname.value, role: selrole.value });
      content.tableData = data;
    };
    onMounted(() => {
      getData();
    });
    return {
      ...toRefs(content),
      getWorkload,
      getData,
      selname,
      selrole,
      visible,
    };
  },
};
</script>
<style lang="scss" scoped>
.modelTop {
  height: 86px;
  padding: 19px 19px 0;
  background: #f3f6fb;
  font-size: 14px;
}
</style>